.g-2048 {
  .title {
    text-align: center;
  }

  .console {
    width: 23rem;
    margin: 0 auto;
    padding: 0.5rem 0;
    background: #bbada0;
    border-radius: 5px;

    // color: #7a7168;
    .row {}

    text-align: center;

    .item {
      border-radius: 5px;
      display: inline-block;
      margin: 0.25rem;
      width: 5rem;
      height: 5rem;
      font-size: 35px;
      font-weight: 700;
      line-height: 5rem;
      background: #cdc1b4;
      animation-duration: .3s; //这里设定完成该动画的时间
    }

    .num-2 {
      background: #eee4da;
      box-shadow: 0 0 30px 10px transparent, inset 0 0 0 1px transparent;
    }

    .num-4 {
      background: #ede0c8;
      box-shadow: 0 0 30px 10px transparent, inset 0 0 0 1px transparent;
    }

    .num-8 {
      color: #f9f6f2;
      background: #f2b179;
    }

    .num-16 {
      color: #f9f6f2;
      background: #f59563;
    }

    .num-32 {
      color: #f9f6f2;
      background: #f67c5f;
    }

    .num-64 {
      color: #f9f6f2;
      background: #f65e3b;
    }

    .num-128 {
      color: #f9f6f2;
      background: #edcf72;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14286);

    }

    .num-256 {
      color: #f9f6f2;
      background: #edcc61;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746),
        inset 0 0 0 1px rgba(255, 255, 255, 0.19048);

    }

    .num-512 {
      color: #f9f6f2;
      background: #edc850;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2381);

    }

    .num-1024 {
      color: #f9f6f2;
      background: #edc53f;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619),
        inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
      font-size: 30px;
    }

    .num-2048 {
      color: #f9f6f2;
      background: #edc22e;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556),
        inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
      font-size: 30px;
    }

    .num-4096 {
      color: #f9f6f2;
      background: black;
      box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556),
        inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
      font-size: 30px;
    }
  }
}


@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}


@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}


@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
